{% extends "base.html" %}

{% block title %}{{ detail.coach.real_name }} - 教练详情 - 乒乓球培训管理系统{% endblock %}

{% block extra_css %}
<style>
    .coach-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 30px;
    }

    .coach-avatar-lg {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid rgba(255,255,255,0.3);
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }

    .coach-level-badge {
        font-size: 0.9rem;
        padding: 5px 15px;
        border-radius: 20px;
        margin-left: 10px;
    }

    .level-senior { background: linear-gradient(45deg, #ffd700, #ff8c00); }
    .level-middle { background: linear-gradient(45deg, #c0c0c0, #808080); }
    .level-junior { background: linear-gradient(45deg, #cd7f32, #8b4513); }

    .coach-info-card {
        background: white;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .stat-item {
        text-align: center;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin-bottom: 20px;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: bold;
        color: #007bff;
        display: block;
        margin-bottom: 5px;
    }

    .stat-label {
        color: #666;
        font-size: 0.9rem;
    }

    .rating-display {
        background: linear-gradient(45deg, #ffd700, #ff8c00);
        color: white;
        border-radius: 8px;
        padding: 20px;
        text-align: center;
        margin-bottom: 20px;
    }

    .rating-stars {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .rating-number {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 5px;
    }

    .info-item {
        margin-bottom: 15px;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }

    .info-value {
        color: #666;
    }

    .action-buttons {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-top: 30px;
    }

    .btn-apply-large {
        background: linear-gradient(45deg, #28a745, #20c997);
        border: none;
        border-radius: 25px;
        padding: 12px 30px;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .btn-apply-large:hover {
        background: linear-gradient(45deg, #218838, #1ea085);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-contact {
        background: linear-gradient(45deg, #007bff, #0056b3);
        border: none;
        border-radius: 25px;
        padding: 12px 30px;
        color: white;
        font-size: 1.1rem;
    }

    .btn-contact:hover {
        background: linear-gradient(45deg, #0056b3, #004085);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    }

    .application-status {
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 20px;
    }

    .status-pending {
        background-color: #fff3cd;
        border: 1px solid #ffeaa7;
        color: #856404;
    }

    .status-approved {
        background-color: #d4edda;
        border: 1px solid #c3e6cb;
        color: #155724;
    }

    .status-rejected {
        background-color: #f8d7da;
        border: 1px solid #f5c6cb;
        color: #721c24;
    }

    .reviews-section {
        background: white;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-top: 20px;
    }

    .review-item {
        padding: 15px 0;
        border-bottom: 1px solid #eee;
    }

    .review-item:last-child {
        border-bottom: none;
    }

    .review-rating {
        color: #ffd700;
        margin-bottom: 8px;
    }

    .back-button {
        background: #6c757d;
        border: none;
        border-radius: 25px;
        padding: 8px 20px;
        color: white;
    }

    .back-button:hover {
        background: #545b62;
        color: white;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 返回按钮 -->
    <div class="row mb-3">
        <div class="col-12">
            <a href="{{ url_for('student_coach.search') }}" class="btn back-button">
                <i class="fas fa-arrow-left me-2"></i>返回搜索
            </a>
        </div>
    </div>

    <!-- 教练基本信息 -->
    <div class="row">
        <div class="col-12">
            <div class="coach-header">
                <div class="row align-items-center">
                    <div class="col-md-2">
                        <img src="{{ detail.coach.photo_url or url_for('static', filename='images/default-avatar.svg') }}"
                             alt="{{ detail.coach.real_name }}" class="coach-avatar-lg">
                    </div>
                    <div class="col-md-6">
                        <h2 class="mb-2">
                            {{ detail.coach.real_name }}
                            <span class="coach-level-badge level-{{ detail.coach.coach_level }}">
                                {% if detail.coach.coach_level == 'senior' %}高级教练{% elif detail.coach.coach_level == 'middle' %}中级教练{% else %}初级教练{% endif %}
                            </span>
                        </h2>
                        <p class="mb-3 fs-5">
                            <i class="fas fa-venus-mars me-2"></i>{{ '男' if detail.coach.gender == 'male' else '女' }}
                            {% if detail.coach.age %}・{{ detail.coach.age }}岁{% endif %}
                            <span class="ms-3">
                                <i class="fas fa-calendar me-2"></i>加入时间：{{ detail.coach.created_at.strftime('%Y年%m月') if detail.coach.created_at }}
                            </span>
                        </p>
                        {% if detail.coach.bio %}
                        <p class="mb-0 fs-6" style="opacity: 0.9;">{{ detail.coach.bio }}</p>
                        {% endif %}
                    </div>
                    <div class="col-md-4 text-end">
                        <div class="fs-3 fw-bold mb-2">
                            ￥{{ detail.coach.hourly_rate or 0 }}/课时
                        </div>
                        <div class="fs-6" style="opacity: 0.9;">
                            <i class="fas fa-users me-1"></i>{{ detail.student_count }}名学员
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 申请状态提示 -->
    {% if detail.application_status %}
    <div class="row">
        <div class="col-12">
            {% if detail.application_status == 'pending' %}
            <div class="application-status status-pending">
                <i class="fas fa-clock me-2"></i>
                <strong>申请审核中</strong> - 您的申请已提交，请等待教练审核
            </div>
            {% elif detail.application_status == 'approved' %}
            <div class="application-status status-approved">
                <i class="fas fa-check-circle me-2"></i>
                <strong>申请已通过</strong> - 您已成为该教练的学员
            </div>
            {% elif detail.application_status == 'rejected' %}
            <div class="application-status status-rejected">
                <i class="fas fa-times-circle me-2"></i>
                <strong>申请被拒绝</strong> - 您可以重新申请或选择其他教练
            </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <div class="row">
        <!-- 左侧 - 统计信息 -->
        <div class="col-md-4">
            <!-- 评分 -->
            <div class="rating-display">
                <div class="rating-stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
                <div class="rating-number">{{ "%.1f"|format(detail.average_rating or 4.0) }}</div>
                <div>基于 {{ detail.total_reviews }} 条评价</div>
            </div>

            <!-- 统计数据 -->
            <div class="row">
                <div class="col-6">
                    <div class="stat-item">
                        <span class="stat-number">{{ detail.student_count }}</span>
                        <span class="stat-label">学员数量</span>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-item">
                        <span class="stat-number">{{ detail.total_classes }}</span>
                        <span class="stat-label">授课总数</span>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-6">
                    <div class="stat-item">
                        <span class="stat-number">{{ stats.response_rate|round(1) }}%</span>
                        <span class="stat-label">响应率</span>
                    </div>
                </div>
                <div class="col-6">
                    <div class="stat-item">
                        <span class="stat-number">{{ stats.pending_applications }}</span>
                        <span class="stat-label">待处理申请</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 右侧 - 详细信息 -->
        <div class="col-md-8">
            <div class="coach-info-card">
                <h5 class="mb-4">
                    <i class="fas fa-info-circle me-2"></i>详细信息
                </h5>

                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-phone me-2"></i>联系电话
                            </div>
                            <div class="info-value">
                                {% if detail.coach.phone %}
                                    {% if detail.coach.show_phone == 'yes' %}
                                        {{ detail.coach.phone }}
                                    {% else %}
                                        <span class="text-muted">申请通过后可见</span>
                                    {% endif %}
                                {% else %}
                                    <span class="text-muted">未填写</span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-envelope me-2"></i>邮箱地址
                            </div>
                            <div class="info-value">
                                {% if detail.coach.email %}
                                    {% if detail.coach.show_email == 'yes' %}
                                        {{ detail.coach.email }}
                                    {% else %}
                                        <span class="text-muted">申请通过后可见</span>
                                    {% endif %}
                                {% else %}
                                    <span class="text-muted">未填写</span>
                                {% endif %}
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-trophy me-2"></i>教练等级
                            </div>
                            <div class="info-value">
                                {% if detail.coach.coach_level == 'senior' %}
                                    高级教练
                                {% elif detail.coach.coach_level == 'middle' %}
                                    中级教练
                                {% else %}
                                    初级教练
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-dollar-sign me-2"></i>课时费用
                            </div>
                            <div class="info-value fw-bold text-success">
                                ￥{{ detail.coach.hourly_rate or 0 }}/课时
                            </div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-users me-2"></i>学员数量
                            </div>
                            <div class="info-value">{{ detail.student_count }}名学员</div>
                        </div>

                        <div class="info-item">
                            <div class="info-label">
                                <i class="fas fa-clock me-2"></i>响应时间
                            </div>
                            <div class="info-value">
                                {% if stats.response_rate >= 80 %}
                                    <span class="text-success">通常在24小时内回复</span>
                                {% elif stats.response_rate >= 50 %}
                                    <span class="text-warning">通常在48小时内回复</span>
                                {% else %}
                                    <span class="text-muted">回复时间较长</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                {% if detail.coach.experience %}
                <div class="info-item">
                    <div class="info-label">
                        <i class="fas fa-medal me-2"></i>教学经验
                    </div>
                    <div class="info-value">{{ detail.coach.experience }}</div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="row">
        <div class="col-12">
            <div class="action-buttons">
                <div class="row align-items-center">
                    <div class="col-md-8">
                        <h6 class="mb-2">选择这位教练</h6>
                        <p class="mb-0 text-muted">
                            {% if detail.can_apply %}
                                点击申请按钮向教练发送选择申请，教练同意后即可开始学习
                            {% elif detail.application_status == 'pending' %}
                                您的申请正在审核中，请耐心等待教练回复
                            {% elif detail.application_status == 'approved' %}
                                您已经是该教练的学员，可以预约课程
                            {% else %}
                                您暂时无法申请该教练（已达到最大教练数量限制）
                            {% endif %}
                        </p>
                    </div>
                    <div class="col-md-4 text-end">
                        {% if detail.can_apply %}
                        <a href="{{ url_for('student_coach.apply', coach_id=detail.coach.id) }}"
                           class="btn btn-apply-large me-2">
                            <i class="fas fa-user-plus me-2"></i>申请选择
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 学员评价 -->
    {% if detail.recent_reviews %}
    <div class="row">
        <div class="col-12">
            <div class="reviews-section">
                <h5 class="mb-4">
                    <i class="fas fa-comments me-2"></i>学员评价
                </h5>

                {% for review in detail.recent_reviews %}
                <div class="review-item">
                    <div class="review-rating">
                        {% for i in range(5) %}
                            {% if i < review.rating %}
                                <i class="fas fa-star"></i>
                            {% else %}
                                <i class="far fa-star"></i>
                            {% endif %}
                        {% endfor %}
                        <span class="ms-2 text-muted">{{ review.created_at.strftime('%Y-%m-%d') }}</span>
                    </div>
                    <p class="mb-1">{{ review.content }}</p>
                    <small class="text-muted">来自学员：{{ review.student.real_name }}</small>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% else %}
    <div class="row">
        <div class="col-12">
            <div class="reviews-section text-center">
                <i class="fas fa-comments fa-3x text-muted mb-3"></i>
                <h6 class="text-muted">暂无学员评价</h6>
                <p class="text-muted">成为首个评价该教练的学员</p>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 加载教练详细信息（AJAX版本）
    loadCoachDetail();
});

function loadCoachDetail() {
    const coachId = {{ detail.coach.id }};

    $.get(`{{ url_for('student_coach.api_coach_detail', coach_id=0) }}`.replace('0', coachId))
        .done(function(response) {
            if (response.success) {
                console.log('教练详情已加载:', response.data);
                // 这里可以更新页面数据（如果需要实时更新）
            }
        })
        .fail(function() {
            console.log('加载教练详情失败');
        });
}

function showMessage(message, type) {
    // 简单的消息提示
    const alertClass = type === 'success' ? 'alert-success' :
                      type === 'error' ? 'alert-danger' : 'alert-info';

    const alertHtml = `
        <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;

    // 在页面顶部插入提示
    $('body').prepend(alertHtml);

    // 3秒后自动消失
    setTimeout(function() {
        $('.alert').fadeOut();
    }, 3000);
}
</script>
{% endblock %}